<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotating Cube in Three.js</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
</head>
<body>

<script src="./three.js"></script>
<script src="./OrbitControls.js"></script>

<script>
  // 场景、相机和渲染器的创建
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 正方体的几何体和材质
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

  // 创建网格并添加到场景中
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 相机控制
  const controls = new THREE.OrbitControls(camera, renderer.domElement);

  // 旋转动画
  let rotationAngle = 0;
  function animate() {
    rotationAngle += 0.01; // 每次调用增加旋转角度
    cube.rotation.x = rotationAngle; // 更新立方体的旋转
    cube.rotation.y = rotationAngle; // 可以同时在多个轴上旋转

    requestAnimationFrame(animate); // 请求下一次动画帧
    renderer.render(scene, camera); // 渲染场景
  }
  animate(); // 开始动画

  // 窗口大小变化处理
  window.addEventListener('resize', onWindowResize, false);
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
</script>

</body>
</html>